import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const width = 720;
const height = 480;

const scene = new THREE.Scene();
const geometry = new THREE.SphereGeometry(60);
const material = new THREE.MeshBasicMaterial();
const mesh = new THREE.Mesh(geometry, material);
//增加纹理
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load("/assets/images/earth.jpg");
material.map = texture;
scene.add(mesh);

//加入光源
const d_light = new THREE.DirectionalLight(0xffffff, 1);
d_light.position.set(100, 100, 100);
scene.add(d_light);
const a_light = new THREE.AmbientLight(0xffffff, 0.5);
a_light.position.set(100, 100, 100);
scene.add(a_light);

//加入辅助坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

//加入相机
const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 2000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);
scene.add(camera);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
console.log(document.getElementById("earth"));
document.getElementById("earth").appendChild(renderer.domElement);

renderer.render(scene, camera);

const controls = new OrbitControls(camera, renderer.domElement);
(function update() {
  // camera.rotation.y += 0.01;
  mesh.rotation.y += 0.003;
  renderer.render(scene, camera);
  requestAnimationFrame(update);
})();
